<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 祖先设置 后代自动生效 */
        /* 文本相关的属性普遍具有继承性 */
        /* 给body设置相关属性，可等价为给网页设置默认属性 */
        /* color font-  text-  line-   list- */
        /* 继承的情况下（即未选中），选择器权重失效，要用就近原则 （同近看权重）*/
        /* 选中的情况下再看权重 */
        /* 选中优先于继承 */
        .box{
            font:italic bold 30px/1.5 '宋体';
            line-height:1.5;
            text-align:center;
            text-decoration: underline;
            color:green;
            /* list-style:none;  这个继承不了 */
        }
        #box1 #box2{
            /* 继承未选中不看权重，离得远所以不选 */
            color: red;
        }
        .box1 .box3{
            /* 继承未选中不看权重，离得近所以选 */
            color: green;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>111</li>
            <li>111</li>
            <li>111</li>
            <li>111</li>
            <li>111</li>
        </ul>
    </div>

    <div class="box1" id="box1">
        <div class="box2" id="box2">
            <div class="box2" id="box3">
                <p>继承（未被选中则权重实效，看就近原则）</p>
            </div>
        </div>
    </div>
</body>
</html>